Eine unverankerte Aktionsschaltfläche (Floating Action Button, FAB) ist eine runde Schaltfläche, die die primäre Aktion in der Benutzeroberfläche Ihrer App auslöst. Auf dieser Seite erfahren Sie, wie Sie die FAB Ihrem Layout hinzufügen, ihr Aussehen anpassen und auf das Tippen auf die Schaltfläche reagieren.
Weitere Informationen zum Entwerfen einer schwebenden Aktionsschaltfläche in Ihrer App gemäß den Material Design-Richtlinien finden Sie unter Schaltflächen: Unverankerte Aktionsschaltfläche.
Unverankerte Aktionsschaltfläche in das Layout einfügen
Im folgenden Code wird gezeigt, wie die FloatingActionButton
in Ihrer Layoutdatei aussehen sollte:
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:src="@drawable/ic_my_icon" android:contentDescription="@string/submit" android:layout_margin="16dp" />
Standardmäßig wird die Farbe des Floating Action Button durch das Attribut colorAccent
bestimmt. Sie können es mit der Farbpalette des Designs anpassen.
Andere FAB-Eigenschaften können Sie entweder mit XML-Attributen oder entsprechenden Methoden konfigurieren, z. B.:
- Die Größe des FAB mit dem Attribut
app:fabSize
oder der MethodesetSize()
. - Die Farbe der Wellenbewegung des FAB mit dem Attribut
app:rippleColor
oder der MethodesetRippleColor()
- Das Symbol für die Floating Action Button mit dem Attribut
android:src
oder der MethodesetImageDrawable()
Auf Tastendruck reagieren
Anschließend können Sie eine View.OnClickListener
anwenden, um das Tippen auf das Floating Action-Button zu verarbeiten. Im folgenden Code wird beispielsweise ein Snackbar
angezeigt, wenn der Nutzer auf die FAB tippt:
Kotlin
val fab: View = findViewById(R.id.fab) fab.setOnClickListener { view -> Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null) .show() }
Java
FloatingActionButton fab = findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } });
Weitere Informationen zu den Funktionen des Floating Action Button finden Sie in der API-Referenz für die FloatingActionButton
.